<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>3D深度UI</title>

<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
html, body {
  height: 100%;
}

body {
  align-items: center;
  background: #642B73;
  background: linear-gradient(to bottom, #C6426E, #642B73);
  display: flex;
  font-family: 'Open Sans', sans;
  justify-content: center;
  overflow: hidden;
  -webkit-perspective: 1800px;
          perspective: 1800px;
  text-align: center;
  margin: 0 20px;
}

h1 {
  color: #3e3e42;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 30px;
  -webkit-transform: translateZ(35px);
          transform: translateZ(35px);
}

h3 {
  color: #eb285d;
  font-size: 16px;
  margin-bottom: 6px;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
}

.cards {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
  display: inline-block;
  padding: 30px 35px;
  -webkit-perspective: 1800px;
          perspective: 1800px;
  text-align: left;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(11deg) rotateY(16.5deg);
          transform: rotateX(11deg) rotateY(16.5deg);
  min-width: 595px;
}

.card {
  border-radius: 15px;
  box-shadow: 5px 5px 20px -5px rgba(0, 0, 0, 0.6);
  display: inline-block;
  height: 250px;
  overflow: hidden;
  -webkit-perspective: 1200px;
          perspective: 1200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translatez(35px);
          transform: translatez(35px);
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  width: 175px;
  text-align: center;
}
.card:not(:last-child) {
  margin-right: 30px;
}

.card__img {
  position: relative;
  height: 100%;
}

.card__bg {
  bottom: -50px;
  left: -50px;
  position: absolute;
  right: -50px;
  top: -50px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translateZ(-50px);
          transform: translateZ(-50px);
  z-index: 0;
}

.card__one .card__img {
  top: 14px;
  right: -10px;
  height: 110%;
}
.card__one .card__bg {
  background: url("img/1bg.jpg") center/cover no-repeat;
}

.card__two .card__img {
  top: 25px;
}
.card__two .card__bg {
  background: url("img/2bg.jpg") center/cover no-repeat;
}

.card__three .card__img {
  top: 5px;
  left: -4px;
  height: 110%;
}
.card__three .card__bg {
  background: url("img/3bg.jpg") center/cover no-repeat;
}

.card__text {
  align-items: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 70px;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.card__title {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
  margin-bottom: 3px;
}

.notice {
  background: gold;
  border-top-left-radius: 6px;
  bottom: 0;
  font-family: monospace;
  font-size: 14px;
  padding: 8px 10px;
  position: absolute;
  right: -20px;
}

.twitter__link {
  cursor: pointer;
  position: absolute;
  right: -10px;
  top: 12px;
  z-index: -1;
  background: #00aced;
  border-radius: 20px;
  height: 30px;
  text-decoration: none;
  padding-right: 10px;
  justify-content: space-between;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  width: 74px;
  opacity: 0.15;
}
.twitter__link:hover {
  opacity: 1;
}

.twitter__icon {
  height: 30px;
}
</style>
<style>.one-pan-tip { cursor: pointer;}.one-pan-tip::before {background-position: center;background-size: 100% 100%;background-repeat: no-repeat;box-sizing: border-box;width: 1em;height: 1em;margin: 0 1px .15em 1px;vertical-align: middle;display: inline-block;}.one-pan-tip-success::before {content: '';background-image: url()}.one-pan-tip-error {text-decoration: line-through;}.one-pan-tip-error::before {content: '';background-image: url()}.one-pan-tip-other::before {content: '';background-image: url()}.one-pan-tip-lock::before{content: '';background-image: url()}</style><meta name="ljjc::status" content="on"></head>
<body>
<div class="cards" style="transform: rotateX(-14.1deg) rotateY(2.1deg);">
  <h3>Movies</h3>
  <h1>Popular</h1>
  <div class="card card__one">
    <div class="card__bg" style="background-position: 0.945px 6.345px;"></div>
    <img class="card__img" src="img/1.png" style="transform: translateX(-2.1px) translateY(-14.1px);">
    <div class="card__text">
      <p class="card__title">Princess Mononoke</p>
    </div>
  </div>
  <div class="card card__two">
    <div class="card__bg" style="background-position: 0.945px 6.345px;"></div>
    <img class="card__img" src="img/2.png" style="transform: translateX(-2.1px) translateY(-14.1px);">
    <div class="card__text">
      <p class="card__title">Spirited Away</p>
    </div>
  </div>
  <div class="card card__three">
    <div class="card__bg" style="background-position: 0.945px 6.345px;"></div>
    <img class="card__img" src="img/3.png" style="transform: translateX(-2.1px) translateY(-14.1px);">
    <div class="card__text">
      <p class="card__title">Howl's Moving Castle</p>
    </div>
  </div>
</div>


<script>
var cards = document.querySelector(".cards");
var images = document.querySelectorAll(".card__img");
var backgrounds = document.querySelectorAll(".card__bg");
var range = 40;

// const calcValue = (a, b) => (((a * 100) / b) * (range / 100) -(range / 2)).toFixed(1);
var calcValue = function calcValue(a, b) {return (a / b * range - range / 2).toFixed(1);}; // thanks @alice-mx

var timeout = void 0;
document.addEventListener('mousemove', function (_ref) {var x = _ref.x,y = _ref.y;
  if (timeout) {
    window.cancelAnimationFrame(timeout);
  }

  timeout = window.requestAnimationFrame(function () {
    var yValue = calcValue(y, window.innerHeight);
    var xValue = calcValue(x, window.innerWidth);
    console.log(xValue, yValue);
    cards.style.transform = "rotateX(" + yValue + "deg) rotateY(" + xValue + "deg)";

    [].forEach.call(images, function (image) {
      image.style.transform = "translateX(" + -xValue + "px) translateY(" + yValue + "px)";
    });

    [].forEach.call(backgrounds, function (background) {
      background.style.backgroundPosition = xValue * .45 + "px " + -yValue * .45 + "px";
    });
  });
}, false);</script>



</body></html>
